<template>
  <div id="platform">
    <div class="top">
      <div class="menu">
        <h1 class="logo"><a href="http://www.dowebok.com/"></a></h1>
        <ul class="nav">
          <!--          <li><a href="javascript:">拼音输入法</a></li>-->
          <!--          <li><a href="javascript:">五笔输入法</a></li>-->
          <!--          <li><a href="javascript:">皮肤编辑器</a></li>-->
          <!--          <li><a href="javascript:">皮肤Store</a></li>-->
          <!--          <li><a href="javascript:">论坛</a></li>-->
          <li><a href="javascript:" @click="$router.push('/user/login')">系统登录</a></li>
        </ul>
      </div>
    </div>
    <mv-full-page
      :isPointer="true"
      pointerPos="right"
      :isV="isV"
      :pages="4"
      :page.sync="currentPage"
      :bgArr="bgArr"
      :isCache="false"
      :transition="{
        duration: '700ms', // 动画时长
        timingFun: 'ease', // 动画速度曲线
        delay: '0s', // 动画延迟
      }"
    >
      <template #page1>
        <div class="page1">
          <div class="section" id="section1" style="margin-top: 100px;">
            <div class="title1">数字车间应用系统</div>
            <div class="title2">工业 4.0 解决方案</div>
            <div class="title3">打造由数据驱动的流程，提高整个企业的运营灵活性</div>
            <div class="page1-cards">
              <a-card hoverable style="width: 350px">
                <img
                  slot="cover"
                  alt="example"
                  src="https://img0.baidu.com/it/u=3332878361,3407651305&fm=253&fmt=auto&app=120&f=JPEG?w=1080&h=607"
                />
                <a-card-meta
                  title="MES生产信息化管理系统"
                  description="MES系统是一套面向制造企业车间执行层的生产信息化管理系统。MES可以为企业提供包括制造数据管理、计划排程管理、生产调度管理、库存管理、质量管理、人力资源管理、工作中心/设备管理、工具工装管理、采购管理、成本管理、生产过程控制、底层数据集成分析等管理模块，为企业打造一个扎实、可靠、全面、可行的制造协同管理平台。">
                </a-card-meta>
              </a-card>
              <a-card hoverable style="width:  350px">
                <img
                  slot="cover"
                  alt="example"
                  src="https://img2.baidu.com/it/u=1104332352,2135196521&fm=253&fmt=auto&app=138&f=PNG?w=887&h=500"
                />
                <a-card-meta
                  title="ERP系统"
                  description="企业ERP系统是一个对企业资源进行有效共享与利用的系统，通过信息系统对信息进行充分整理、有效传递，使企业的资源在购、存、产、销、人、财、物等各个方面能够得到合理地配置与利用，从而实现企业经营效率的提高。从本质上讲，企业ERP系统是一套信息系统，是一种工具。系统设计中可集成某些管理思想与内容，可帮助企业提升管理水平。">
                </a-card-meta>
              </a-card>
              <a-card hoverable style="width:  350px">
                <img
                  slot="cover"
                  alt="example"
                  src="https://img0.baidu.com/it/u=61494395,2067947189&fm=253&fmt=auto&app=138&f=JPG?w=781&h=448"
                />
                <a-card-meta
                  title="数字化车间的建设的流程与特点"
                  description="数字化车间是整个产业建设与发展的关键环节，其能够通过产品的生产与加工来实现原料的生产性转化。经济学家威廉在《车间的竞争优势》中指出，车间能够通过将原料转化为产品，从而实现生产价值的最大化。而随着工业互联网的到来，数字化的系统广泛应用于车间的生产中，并在信息采集、运作监测以及安全保障方面形成了相对完善的运作模式与体系。">
                </a-card-meta>
              </a-card>
              <a-card hoverable style="width:  350px">
                <img
                  slot="cover"
                  alt="example"
                  src="https://img1.baidu.com/it/u=1112410731,3341243758&fm=253&fmt=auto?w=500&h=311"
                />
                <a-card-meta
                  title="构建数字化车间的意义"
                  description="纵观国外的制造业，特别是一些发达国家，目前已基本实现数字化工厂与智能制造的普及和应用，反观我国制造业，数字化与智能化的融合相较于别国还处于缺乏的状态。智能制造的关键基础是构建数字化车间，是后期构建智能工厂无法忽略的重要步骤。事实上，无论任何行业，凡是涉及到制造生产，都离不开生产车间。">
                </a-card-meta>
              </a-card>
            </div>
          </div>
        </div>
      </template>

      <template #page2>
        <div class="page2">
          <div class="section" id="section2">
            <div class="page2-cards">
            </div>
          </div>
        </div>
      </template>

      <template #page3>
        <div class="section" id="section3">
        </div>
      </template>

      <template #page4>
        <div class="section" id="section0">
          <!-- <div class="title1">工业企业数字化转型趋势</div>
          <div class="title2">搜狗拼音输入法 for Mac 3.5.0</div>
          <div class="title3">我们相信，在Mac的世界中，你只需放飞自己的想象力
            <br>享受一切理所应当的美好！</div>
          <div class="DownloadBtn"><a href="http://www.dowebok.com/" target="_blank">立即下载</a></div> -->
        </div>
      </template>
    </mv-full-page>

  </div>
</template>

<script>
  import { Carousel } from 'ant-design-vue'
  import 'mv-full-page/lib-dist/mv-full-page.css'
  import MvFullPage from 'mv-full-page'

  export default {
    name: 'Index',
    components: {
      Carousel,
      MvFullPage
    },
    data() {
      return {
        isV: true,
        currentPage: 1,
        bgArr: [
          { isBg: true, src: require('@/assets/images/5bg.jpg') },
          { isBg: true, src: require('@/assets/images/3bg.jpg') },
          { isBg: true, src: require('@/assets/images/4bg.jpg') },
          { isBg: true, src: require('@/assets/images/1bg.jpg') }
        ]
      }
    },
    mounted() {
    },
    methods: {

    }
  }
</script>

<style lang="less" scoped>
* { margin: 0; padding: 0;}
ul { list-style-type: none;}
.top { position: fixed; left: 0; right: 0; top: 0; z-index: 1000; height: 50px; background-color: rgba(0, 0, 0, 0.6);}
.menu { width: 1000px; margin: 0 auto; overflow: hidden;}
.logo { float: left; margin-top: 9px;}
.logo a { display: inline-block; width: 32px; height: 32px; background-image: url(../../../assets/logo.png); background-size: 32px 32px;}
.nav { float: right; margin-top: 10px; font-size: 0;}
.nav li { display: inline-block; margin-left: 40px;}
.nav a { display: inline-block; height: 30px; line-height: 30px; font-size: 12px; color: #fff; text-decoration: none;}
.nav a:hover { color: #83c3f3;}
.section { text-align: center; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; overflow: hidden; margin-top: 200px}

.title1 { opacity: 0.8; font-size: 60px; line-height: 93px; background: url(../../../assets/images/titleline1.png) no-repeat center bottom;}
.title2 { opacity: 0.8; font-size: 40px; line-height: 75px;}
.title3 { font-size: 24px; font-family: 'PingFang-SC-UltraLight', '微软雅黑', '宋体',sans-serif; line-height: 48px; margin: 10px 0; opacity: 0.7;}
#section1 .title1, #section1 .title2, #section2 .title1, #section2 .title2 { color: #fff; opacity: 1;}
#section1 .title3, #section2 .title3 { color: #fff;}
#section3 .title3 { color: #000;}
#section1 .title1 { background: url(../../../assets/images/titleline2.png) no-repeat center bottom;}
#section2 .title1 { background: url(../../../assets/images/titleline3.png) no-repeat center bottom;}
#section3 .title1 { background: url(../../../assets/images/titleline4.png) no-repeat center bottom;}
.mTxt1 { width: 526px; height: 195px; margin: 0 auto; position: relative; top: 25%; }
.DownloadBtn { cursor: pointer; margin: 85px auto 0; width: 220px; height: 50px; position: relative; background: #5396FF; color: #fff; line-height: 50px; font-size: 24px; border-radius: 25px;}
.DownloadBtn a { display: inline-block; width: 100%; height: 100%; color: #fff; font-family: 'PingFang-SC-UltraLight', '微软雅黑', '宋体',serif;}
.mTxt1 { width: 526px; height: 195px; margin: 0 auto; position: relative; top: 25%; }
.DownloadBtn { cursor: pointer; margin: 85px auto 0; width: 220px; height: 50px; position: relative; background: #5396FF; color: #fff; line-height: 50px; font-size: 24px; border-radius: 25px;}
.DownloadBtn a { display: inline-block; width: 100%; height: 100%; color: #fff; font-family: 'PingFang-SC-UltraLight', '微软雅黑', '宋体',fantasy; text-decoration: none;}
#fp-nav ul li a span, .fp-slidesNav ul li a span { background-color: #fff;}
.page1-cards {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
